import './index.css';
import list from './data.js';
let ul = document.querySelector('.content > ul');
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');
let totalBox = document.querySelector('.total');
let selectBox = document.querySelector('select');
let listLength = list.length;
let selectNum = selectBox.value;
//默认页数
let pageMin = 1;
let pageMax = Math.ceil(listLength / selectNum);

// 禁止按钮
function banBtn() {
    pageMin = Number(totalBox.innerText.substring(0, 1));
    pageMax = Math.ceil(listLength / selectNum);
    if (Number(pageMin) == 1) {
        prevBtn.classList.add('disable');
    } else {
        prevBtn.classList.remove('disable');
    }
    if (Number(pageMin) == pageMax) {
        nextBtn.classList.add('disable');
    } else {
        nextBtn.classList.remove('disable');
    }
}

//渲染函数
function rendered() {
    // 获取页数
    selectNum = selectBox.value;
    pageMin = Number(totalBox.innerText.substring(0, 1));
    pageMax = Math.ceil(listLength / selectNum);
    console.log(totalBox.innerText.substring(0, 1));
    //更新页面
    totalBox.innerText = `${pageMin} / ${pageMax}`;
    //每次选择页数后进行更新
    ul.innerHTML = '';
    for (let i = (pageMin - 1) * selectNum; i < list.length; i++) {
        ul.innerHTML += `<li>
      <img src="${list[i].pic}"/>
      <p>${list[i].name}</p>
      <p>城市: ${list[i].city}</p>
      <p>地址: ${list[i].address}</p>
      <p>价格: ${list[i].price}</p>
      <p>演出时间: ${list[i].showTime}</p>
    </li>`;
    }
}
//默认渲染
rendered();
banBtn();
// 页数重新选择时更新
selectBox.addEventListener('click', function () {
    pageMin = 1;
    totalBox.innerHTML = `${pageMin} / ${pageMax}`;
    rendered();
    banBtn();
});
//上一页
prevBtn.addEventListener('click', function () {
    pageMin = Number(totalBox.innerText.substring(0, 1));
    pageMax = Math.ceil(listLength / selectNum);
    if (pageMin != 1) {
        pageMin = pageMin - 1;
        pageMax = Math.ceil(listLength / selectNum);
        totalBox.innerHTML = `${pageMin} / ${pageMax}`;
    } else {
        alert('这里是第一页');
    }
    rendered();
    banBtn();
});
//下一页
nextBtn.addEventListener('click', function () {
    pageMin = Number(totalBox.innerText.substring(0, 1));
    pageMax = Math.ceil(listLength / selectNum);
    if (pageMin != pageMax) {
        pageMin = pageMin + 1;
        totalBox.innerHTML = `${pageMin} / ${pageMax}`;
    } else {
        alert('这里是最后一页');
    }
    rendered();
    banBtn();
});
